<template>
  <div class="grxx">
    <el-form :model="student" label-width="120px" ref="bbb" size="large">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="student.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="student.gender" class="ml-4">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族">
            <el-input v-model="student.ethnicGroup" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-input v-model="student.age" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况">
            <el-select v-model="student.maritalStatus" placeholder="请选择">
              <el-option :value="nihao" :label="fdsoafh" />
              <el-option v-for="item in maritalOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input v-model="student.contactInfo" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信号">
            <el-input v-model="student.wechat" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="E-Mail">
            <el-input v-model="student.email" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input v-model="student.idCardNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人">
            <el-input v-model="student.emergencyContactPerson" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急人联系方式">
            <el-input v-model="student.emergencyContactInfo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="籍贯">
            <el-input v-model="student.nativePlace" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="现居住地">
            <el-input v-model="student.liveSpace" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="英语等级">
            <el-input v-model="language.englishLevel" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他语言及等级">
            <el-input v-model="language.languageAndLevels" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

  <div>
    <el-button type="primary" @click="postStudent">提交</el-button>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
const bbb = ref(null)
const student = reactive({
  name: '',
  gender: '',
  ethnicGroup: '',
  age: '',
  maritalStatus: '',
  nativePlace: '',
  contactInfo: '',
  emergencyContactPerson: '',
  emergencyContactInfo: '',
  idCardNumber: '',
  liveSpace: '',
  wechat: '',
  email: '',
});

const language = reactive({
  englishLevel: '',
  languageAndLevels: '',
})

const maritalOptions = ['已婚', '未婚', '其他']
const marks = {
  0: '0',
  5: '5k',
  10: '10k',
  15: '15k'
}

const al = () => {
  alert('666')
}

const { proxy } = getCurrentInstance()
const baseURL = "http://localhost:8080/"
const postStudent = function () {
  proxy.$axios.post(baseURL + '/student', student)
    .then(function (response) {
      const { data: res } = response
      console.log(res)
    });
  proxy.$axios.post(baseURL + '/language', language)
    .then(function (response) {
      const { data: res } = response
      console.log(res)
    });
}

defineExpose({
  student, al, bbb
})
</script>
<script>
export default {
  name: 'Student'
}
</script>

<style scoped>
.grxx {
  margin: 50px;
}
</style>